<template>
	<div id="login">
		<div class="row" style="margin-top:50px;">
			<div class="col-md-4 col-md-push-4">
				<div class="well col-md-10">
					<h3>用户登录</h3>
					<h5 style="color: #f00;">{{error}}</h5>
					<div class="input-group input-group-md">
						<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
						<input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" v-model="username">
					</div>
					<div class="input-group input-group-md">
						<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
						<input type="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon1" v-model="psw">
					</div>

					<button type="submit" class="btn btn-success btn-block" @click="check">
						登录
					</button>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	import {
		check
	} from "../network/home.js"
	export default {
		name: "login",
		data() {
			return {
				username: "",
				psw: "",
				error: "",
				status: ""
			}
		},
		methods: {
			check() {
				check(this.username, this.psw).then(
					res => {
						this.error = res.data.error;
						this.status = res.data.status;



						if (this.status == "success") {
							console.log("登陆成功");
							this.$store.commit("usernameUpdate", this.username);
							this.$router.replace("/movie")
						}



					}

				).catch(err => {
					console.log(err)
				});



			}
		}


	}
</script>

<style scoped>


	.input-group {
		margin: 10px 0px;
	}

	h3 {
		padding: 5px;
		border-bottom: 1px solid #ddd;
	}

	li {
		list-style-type: square;
	
	}
	em {
		color: #c7254e;
		font-style: inherit;
		background-color: #f9f2f4;
	}
</style>
